<script>
import { Input } from 'ant-design-vue';
// import LoadingMore from '@/components/Library/LoadingMore';

export default {
  name: 'uniList',

  components: {
    // LoadingMore,
    AInputSearch: Input.Search
  },

  props: {
    uniList: {
      type: Array,
      default() {
        return []
      }
    },
    // 是否显示头部区域
    showHead: {
      type: Boolean,
      default: true
    },
    subTitle: {
      type: String,
      default: ''
    },
    subSize: {
      type: Number,
      default: 0
    }
  },

  methods: {
    goDetail(event) {
      const { id } = event.target.dataset;
      this.$emit('goDetail', id);
    }
  },
  
  render(h) {
    let uniItem = this.uniList.map((item, index) => {
      const name = `${item.alias && item.alias.length ? `(${item.alias[0]})` : ''}`
      return h('li', {
        staticClass: 'uni-item',
        attrs: {
          'data-id': item.id || item.userId
        }
      }, [
        // 图片
        h('img', {
          staticClass: 'uni-img mleft-10',
          attrs: {
            'data-id': item.id || item.userId
          },
          directives: [
            {
              name: "lazy",
              rawName: "v-lazy",
              value: `${item.picUrl || item.avatarUrl || item.coverImgUrl}?param=100y100`,
              expression: "item.picUrl",
            },
          ]
        }),
        // 名称
        h('div', {
          staticClass: 'uni-name font-16 mleft-10 text-hidden',
          attrs: {
            'data-id': item.id || item.userId,
            title: `${item.name || item.nickname}${name}`
          },
        }, [
          h('span', {
            style: {
              color: '#2c3e50'
            },
            domProps: {
              innerHTML: item.name || item.nickname
            }
          }),
          h('span', {
            domProps: {
              innerHTML: name
            }
          })
        ]),
        this.$scopedSlots.default(item)
      ])
    });
    let headItem = [];
    if (this.showHead) {
      headItem.push(h('div', {
        staticClass: 'font-weight mleft-10',
      }, [
        h('span', {
          domProps: {
            innerHTML: this.subTitle
          }
        }),
        h('span', {
          domProps: {
            innerHTML: `(${this.subSize})`
          },
          style: {
            color: "rgb(207, 207, 207)"
          }
        })
      ]));
      headItem.push(
        h('a-input-search', {
          style: {
            width: '200px'
          },
          props: {
            placeholder: `请输入${this.subTitle}`,
            allowClear: true
          }
        })
      )
    }
    return h('div', {
      attrs: {
        id: 'uni-list'
      }
    }, [
      h('div', {
        staticClass: 'sub-head mbottom-10'
      }, [...headItem]),
      // this.$slots.search,
      h('ul', {
        staticClass: 'uni',
        on: {
          click: this.goDetail
        }
      }, [uniItem]),
      // 加载更多
      this.$slots.more
    ])
  }
}
</script>

<style lang="less" scoped>
#uni-list {
  .sub-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .uni-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    &:hover,
    &:nth-child(2n) {
      background: #f9f9f9;
    }
    >img {
      width: 70px;
      height: 70px;
      border-radius: 5px;
    }
    >div {
      flex: 1;
    }
    .uni-name {
      flex: none;
      width: 60%;
      color: #c3c3c4;
    }
  }
  /deep/input.ant-input {
    border-radius: 20px;
    background: #f9f9f9;
    height: 36px;
    line-height: 36px;
    border: none;
    color: #3e3e3e;
    box-shadow: none;
  }
  // /deep/span.ant-input-suffix > i {
  //   font-size: 22px;
  //   color: #3e3e3e;
  //   font-weight: 600;
  // }
}
</style>